<template>
    <div class="OnlineAddress f-cb">
        <!-- <open-account-pregress v-if="isModify==1"></open-account-pregress> -->
        <div class="title">{{$t('m.OnlineAddress')}}</div>
        <div class="OnlineAddressTips" v-if="flowInfo.page_info.branch.local[0]['top_tip_'+lang] != ''" v-html="flowInfo.page_info.branch.local[0]['top_tip_'+lang]"></div>
        <ul class="OnlineAddressList f-cb">
            <li v-for="(item,index) in banklist" :key="index" :class="index<2?'hover':''">
                <div class="titles" @click="OpenCloseBox($event)">{{item['name_'+lang]}}</div>
                <!-- type 1 FPS转数快 2 银行-->
                <dl class="contents f-cb">
                    <dd>
                        <span class="name fl">{{$t('m.Payeesname')}}</span>
                        <span class="fr backstageData">{{item['payee_'+lang]}}</span>
                    </dd>
                    <dd>
                        <span class="name fl">{{$t('m.Payeeaccount')}}</span>
                        <span class="fr backstageData">{{item.account_zh}}</span>
                    </dd>
                    <!-- FPS转数快才显示的字段 -->
                    <dd v-if="item.type == 1">
                        <span class="name fl">{{$t('m.FPScode')}}</span>
                        <span class="fr backstageData">{{item.fps_zh}}</span>
                    </dd>
                    <dd v-if="item.type == 1">
                        <span class="name fl">{{$t('m.PayeeaCity')}}</span>
                        <span class="fr backstageData">{{item['city_'+lang]}}</span>
                    </dd>
                    <!-- FPS转数快才显示的字段 -->
                    <!-- 银行才显示的字段 -->
                    <dd v-if="item.type == 2">
                        <span class="name fl">{{$t('m.BeneficiaryCountry')}}</span>
                        <span class="fr backstageData">{{item['city_'+lang]}}</span>
                    </dd>
                    <!-- 银行才显示的字段 -->
                    <dd>
                        <span class="name fl">{{$t('m.ReceiverAddress')}}</span>
                        <span class="fr backstageData">{{item['address_'+lang]}}</span>
                    </dd>
                    <!-- FPS转数快才显示的字段 -->
                    <dd v-if="item.type == 1">
                        <span class="name fl">{{$t('m.PayeeSWIFT')}}</span>
                        <span class="fr backstageData">{{item.swift_zh}}</span>
                    </dd>
                    <!-- FPS转数快才显示的字段 -->
                    <!-- 银行才显示的字段 -->
                    <dd v-if="item.type == 2">
                        <span class="name fl">{{$t('m.SWIFTcode')}}</span>
                        <span class="fr backstageData">{{item.swift_zh}}</span>
                    </dd>
                    <!-- 银行才显示的字段 -->
                    <dd>
                        <span class="name fl width100">{{item['tip_'+lang]}}</span>
                    </dd>
                    <dd>
                        <span class="name fl">{{$t('m.Receiptaccountbankfullname')}}</span>
                        <span class="fr backstageData">{{item['bank_name_'+lang]}}</span>
                    </dd>
                    <!-- FPS转数快才显示的字段 -->
                    <dd v-if="item.type == 1">
                        <span class="name fl">{{$t('m.ReceivingBankCity')}}</span>
                        <span class="fr backstageData">{{item['bank_name_city_'+lang]}}</span>
                    </dd>
                    <!-- FPS转数快才显示的字段 -->
                    <!-- 银行才显示的字段 -->
                    <dd v-if="item.type == 2">
                        <span class="name fl">{{$t('m.Countryareawherethebankislocated')}}</span>
                        <span class="fr backstageData">{{item['bank_name_city_'+lang]}}</span>
                    </dd>
                    <dd v-if="item.type == 2">
                        <span class="name fl">{{$t('m.Payeeaccountaddress')}}</span>
                        <span class="fr backstageData">{{item['bank_name_address_'+lang]}}</span>
                    </dd>
                    <!-- 银行才显示的字段 -->
                    <dd>
                        <span class="name fl">{{$t('m.Theremittancenotes')}}</span>
                        <span class="fr backstageData">{{item['adjunct_'+lang]}}</span>
                    </dd>
                     <dd>
                        <span class="fr backstageData"><span class="tubiao">{{$t('m.Replicable')}}</span></span>
                    </dd>
                </dl>
            </li>
        </ul>
        <div class="Statement f-cb" @click="isStatementshow">
            <img src="@/assets/img16.png" alt="" class="img">
            <div class="fl">
                <div class="titles">{{$t('m.text14')}}</div>
                <div class="fonts">{{$t('m.text15')}}</div>
            </div>
        </div>
        <div class="mainLandBtns f-cb">
            <span class="fl return" @click="returnClick">{{$t('m.OtherMethods')}}</span>
            <span class="fr next" @click="NextClick">{{$t('m.Notification')}}</span>
        </div>
        <statement :show="isStatement" @closeClick="closeClick" :Data="StatementData"></statement>
    </div>
</template>

<script>
    import Statement from "@/components/popup/statement.vue";
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    import {pageFlow,BtnsFlow,uploads,submit} from "@/common/common";
    export default {
        components: {Statement,openAccountPregress},
        data() {
            return{
                isStatement:false,
                StatementData:{},
                pdflinks:"",
                banklist:{},
                lang:sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en',
            }
        },
        computed:{
            flowInfo(){
                
                return JSON.parse(sessionStorage.getItem('flowInfo'))
            },
            userType(){
                return sessionStorage.getItem('userType')
            },
            isModify(){
                return Number(sessionStorage.getItem('isModify'))
            }
        },
        mounted(){
            this.getflow(this.flowInfo.current_page)
            this.getagreement();
            this.getbank();
            window.document.title = this.$t('m.OnlineAddress')
        },
        methods:{
            //获取银行列表
            getbank(){
                var _this = this;
                _this.$axios.get('/open/blank')
                .then(res => {
                    if(res.data.code == 1){
                        _this.banklist = res.data.data;
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            //点击打开注册协议
            isStatementshow(){
                var _this = this;
                if(_this.pdflinks == ""){
                    _this.isStatement = true;
                }else{
                    window.open(_this.pdflinks);
                }
            },
            getflow(page){
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        this.listInfo =  res.data;
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else if(res.code == 102 || res.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            OpenCloseBox(event){
                var event = $(event.target).parents("li")
                if(event.hasClass("hover")){
                    event.removeClass("hover")
                    event.find(".contents").stop().slideUp();
                }else{
                    event.addClass("hover")
                    event.find(".contents").stop().slideDown();
                }
            },
            //关闭弹框
            closeClick(msg){
                this[msg] = false;
            },
            returnClick(){
                this.$router.replace({ path:'/verification'});
            },
            //获取注册协议
            getagreement(){
                var _this = this;
                _this.$axios.get('/agreement',{params:{
                    type:3,
                    pageSize:1,
                }})
                .then(res => {
                    if(res.data.code == 1){
                        var lang = this.lang=='zh-CN'?'zh':'en'
                        if(res.data.data[0]['pdf_url_'+lang] == ""){
                            _this.getagreementinfo(res.data.data[0].id)
                        }else{
                            this.pdflinks = res.data.data[0]['pdf_url_'+lang];
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            getagreementinfo(id){
                var _this = this;
                _this.$axios.get('/agreement/'+id)
                .then(res => {
                    if(res.data.code == 1){
                        this.StatementData = res.data.data;
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            //点击下一步
            NextClick(){
                this.$router.replace({ path:'/OnlineRemit'});
            }
        },
        watch:{

        },
    }
</script>

<style lang="less">
    .OnlineAddress{
        padding-top:38px;
        width: 460px;
        margin:0 auto;
        .title{
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
            margin-bottom: 9px;
        }
        .OnlineAddressTips{
            padding:6px 11px;
            border-radius:3px;
            background: @ecf3fe;
            font-size: 14px;
            color: @hoverColor;
            line-height:18px;
            margin-bottom: 20px;
            p{
                font-size: 14px;
                color: @hoverColor;
                line-height:18px;
            }
        }
        .mainLandBtns{
            width: 100%;
            span{
                cursor: pointer;
                width: 180px;
                height: 36px;
                line-height: 36px;
                border-radius:3px;
                display:block;
                text-align: center;
                font-size: 14px;
                transition: opacity 0.3s;
            }
            span:hover{
                opacity: 0.8;
            }
            span.return{
                background: @e7e6eb;
                color: @000;
            }
            span.next{
                background: @hoverColor;
                color: @fff;
            }
        }
        .OnlineAddressList{
            padding-bottom:20px;
            li{
                padding: 7px 19px;
                border:1px solid @e7e6eb;
                border-radius:3px;
                margin-bottom: 10px;
                .titles{
                    font-size: 14px;
                    color: @000;
                    line-height: 34px;
                    cursor: pointer;
                    background: url(~@/assets/examine10.png) no-repeat right center;
                }
                .contents{
                    width: 100%;
                    display: none;
                    dd{
                        float: left;
                        width: 100%;
                        padding: 5px 0;
                        margin: 0;
                        .name{
                            width: 185px;
                            font-size: 14px;
                            color: @titleColor;
                            line-height: 24px;
                        }
                        .name.width100{
                            width: 100%;
                            font-size:12px;
                        }
                        .backstageData{
                            float: right;
                            text-align: right;
                            width:225px;
                            color: @000;
                            font-size: 14px;
                            line-height: 24px;
                            .tubiao{
                                padding-left: 19px;
                                background: url(~@/assets/img18.png) no-repeat left center;
                                background-size: 12px;
                            }
                        }
                    }
                }
            }
            li.hover .titles{
                background: url(~@/assets/examine11.png) no-repeat right center;
            }
            li:nth-child(1) .contents,li:nth-child(2) .contents{
                display: block;
            }
        }
        .Statement{
            padding:10px 20px 10px 10px;
            border-top:1px solid @e7e6eb;
            border-bottom:1px solid @e7e6eb;
            background: url(~@/assets/img17.png) no-repeat 95% center;
            background-size:9px auto;
            margin-bottom: 40px;
            cursor: pointer;
            .img{
                width: 34px;
                float: left;
                margin-right:10px;
            }
            .titles{
                font-size: 14px;
                line-height: 24px;
                color: @404040;
            }
            .fonts{
                font-size: 14px;
                line-height: 22px;
                color: @b0b0b2;
            }
        }
        .Statement>div{
            width:calc(100% - 44px)
        }
    }
</style>